<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>技能</title>
    <link th:href="@{/layui/css/layui.css}" href="../../../static/layui/css/layui.css" rel="stylesheet"/>
    <style>
        body{margin:10px auto;width: 80%;}

    </style>
</head>
<body>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm refresh">刷新</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm xinzen">新增</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm open-all">全部展开</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm close-all">全部关闭</button>

<table class="layui-table layui-form" id="tree-table"></table>



<script  th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    layui.config({
        base: '/layui/extends/',
    })
    layui.use(['treeTable','layer','form'],function(){
        var o = layui.$,
            form = layui.form,
            layer = layui.layer,
            treeTable = layui.treeTable;
        // 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组

        var	re = treeTable.render({
            elem: '#tree-table',
            url:"/article/classify/selectList",
            icon_key: 'title',
            primary_key: 'id',
            parent_key: 'parentId',
            end: function(e){
                form.render();
            },
            cols: [
                { key: 'title', title: '名称', width: '100px',
                    template: function(item){
                        if(item.level == 0){
                            return '<span style="color:red;">'+item.name+'</span>';
                        }else if(item.level == 1){
                            return '<span style="color:green;">'+item.name+'</span>';
                        }else if(item.level == 2){
                            return '<span style="color:blueviolet;">'+item.name+'</span>';
                        }else if(item.level == 3){
                            return '<span style="color:darkcyan;">'+item.name+'</span>';
                        }else if(item.level == 4){
                            return '<span style="color:yellowgreen;">'+item.name+'</span>';
                        }else if(item.level == 5){
                            return '<span style="color:gray;">'+item.name+'</span>';
                        }
                    }
                }, { key: 'id', title: 'ID', width: '100px', align: 'center'
                }, { key: 'parentId', title: '上级ID', width: '100px', align: 'center'},
                {
                    title: '操作', align: 'center', width: '200px',
                    template: function(item){
                        return '<a href="javascript:;" lay-filter="add">添加</a> ' +
                            '| <a lay-filter="edit" href="javascript:;">编辑</a> | ' +
                            '<a lay-filter="delete" style="color: red;" href="javascript:;">删除</a>';
                    }
                }
            ]
        });


        // 监听自定义
        treeTable.on('tree(add)',function(data){
            var item = data.item;

            var open = layer.open({
                type: 2,
                area:['60%','50%'],
                title: "添加分类",
                content: '/article/classify/add?id='+item.id
            });
        })
        treeTable.on('tree(edit)',function(data){
            var item = data.item;
            var open = layer.open({
                type: 2,
                area:['60%','50%'],
                title: "添加分类",
                content: '/article/classify/edit?id='+item.id+'&parentId='+item.parentId
            });
        })

        treeTable.on('tree(delete)',function(data){
            var item = data.item;
            layer.confirm('真的删除么，如果有子元素将一并删除', function(index){
                o.ajax({
                    url:"/article/classify/delete",
                    type:"POST",
                    data:{"id":item.id},
                    success:function (e) {
                        if(e.success){
                            treeTable.render(re);
                            layer.close(index);
                        }else{
                            layer.msg(e.message);
                        }
                    },dataType:"json"
                });
            });
        })

        // 刷新重载树表（一般在异步处理数据后刷新显示）
        o('.refresh').click(function(){
            treeTable.render(re);
        })
        //新增
        o('.xinzen').click(function(){
            var open = layer.open({
                type: 2,
                area:['60%','50%'],
                title: "添加分类",
                content: '/article/classify/add?id=0'
            });
        })
        // 全部展开
        o('.open-all').click(function(){
            treeTable.openAll(re);
        })
        // 全部关闭
        o('.close-all').click(function(){
            treeTable.closeAll(re);
        })

    })
</script>
</body>
</html>